<template>
    <div class="app-container">
        <el-row :gutter="24" class="main">
            <el-col :span="8">
                <div style="padding: 16px; background: #ffffff;">
                    <ImagePreview
                        :width="'100%'"
                        :height="'40%'"
                        :src="project.url"
                        :preview-src-list="[project.url]"
                    />
                    <p>
                        <span style="font-weight: 600;">{{ project.companyName }}</span>
                        <span style="float: right; color: #409EFF; cursor: pointer;" @click="handlePage">详情></span>
                    </p>
                    <p style="font-size: 14px;">{{ project.description }}</p>
                </div>
            </el-col>
            <el-col :span="16" style="background: #F2F3F5 !important; cursor: pointer;">
                <el-row :gutter="24" style="height: 50%; padding-bottom: 8px;">
                    <el-col :span="3">
                        <img src="../assets/images/callPolice.png" height="100%" style="float: left;" />
                    </el-col>
                    <el-col :span="8" style="border-radius: 5px; background: #ffffff;"  class="imgClass">
                        <p style="font-weight: 600; margin: 0; padding: 8px 0;">报警检测</p>
                        <!-- <div style="cursor: pointer; text-align: left;"> -->
                            <img src="../assets/images/warranty.png" width="100" @click="handleImageClick('1')" />
                            <img src="../assets/images/maintenance.png" width="100" @click="handleImageClick('0')" />
                            <img src="../assets/images/inspection.png" width="100" @click="handleImageClick('2')" />
                        <!-- </div> -->
                    </el-col>
                    <el-col :span="13" style="text-align: left;">
                        <img src="../assets/images/workorder.png" width="40%" height="100%" style="padding-right: 2%;">
                            <span style="position: absolute; top: 35%; left: 49%; font-weight: 600;">{{  dayWorkorderNum + '/' + weekWorkorderNum + '/' + monthWorkorderNum}}</span>
                        </img>
                        <img src="../assets/images/workorder2.png" width="30%" height="100%" style="padding-right: 2%;">
                            <span style="position: absolute; top: 35%; left: 70%; font-size: 24px; font-weight: 600;">{{ execingNum }}</span>
                        </img>
                        <img src="../assets/images/workorder3.png" width="30%" height="100%">
                            <span style="position: absolute; top: 35%; left: 86%; font-size: 24px; font-weight: 600;">{{ timeoutNum }}</span>
                        </img>
                    </el-col>
                </el-row>
                <el-row :gutter="24" style="height: 50%;">
                    <el-col :span="6">
                        <div style="width: 100%; height: 100%; background: #ffffff; border-radius: 5px; padding: 0 8px;">
                            <p style="font-weight: 600; margin: 0; padding: 8px 0;">工单管理</p>
                            <div v-for="(item, index) in itemImgs" :key="index" @click="handleImageClickForStatus(item)" style="width: 50%; height: 20%; float: left; margin-bottom: 30px; position: relative; top: 30px;">
                                <img :src="item.image" width="50" style="float: left;" />
                                <p style="float: left; font-size: 14px; padding-left: 5px;">{{ item.text }}</p>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div style="width: 100%; height: 100%; background: #ffffff; border-radius: 5px; padding: 0 0 0 8px;">
                            <p style="font-weight: 600; margin: 0; padding: 8px 0;">备件仓库</p>
                            <div v-for="(item, index) in itemImg2s" :key="index" @click="handleImageClickForBjxq" style="width: 100%; height: 20%; padding: 0 5px; margin: 20px;">
                                <img :src="item.image" width="50" style="float: left;"/>
                                <p style="float: left; font-size: 14px; padding-left: 5px;">{{ item.text }}</p>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="width: 100%; height: 100%; background: #ffffff; border-radius: 5px; padding: 0 8px;">
                            <p style="font-weight: 600; margin: 0; padding: 8px 0;">项目管理</p>
                            <div v-for="(item, index) in itemImg3s" :key="index" @click="handleImageClickForXmgl(item)" style="width: 50%; height: 20%; float: left; margin-bottom: 30px; position: relative; top: 30px;">
                                <img :src="item.image" width="50" style="float: left;" />
                                <p style="float: left; font-size: 14px; padding-left: 5px;">{{ item.text }}</p>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div style="width: 100%; height: 100%; background: #ffffff; border-radius: 5px; padding: 8px;">
                                <el-row :gutter="20">
                                    <el-col :span="18" style="height: 32px;">
                                        <div class="time-selector">
                                        <el-button-group>
                                            <el-button
                                            v-for="(item, index) in timeOptions"
                                            :key="index"
                                            :type="activeTime === item.value ? 'primary' : ''"
                                            @click="handleTimeChange(item.value)"
                                            >
                                            {{ item.label }}
                                            </el-button>
                                        </el-button-group>
                                        </div>
                                    </el-col>
<!--                                    <el-col :span="6" style="height: 32px; text-align: right;">-->
<!--                                        <el-button type="text" @click="handleMore">更多</el-button>-->
<!--                                    </el-col>-->
                                    <el-col :span="24">
                                        <div ref="chart" style="height: 200px;"></div>
                                    </el-col>
                                </el-row>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-row :gutter="24" class="main" style="margin-top: 16px;">
            <el-col :span="8">
                <div  style="float: left; background: #E7F0FB; padding: 16px; overflow-y: scroll; overflow-x: hidden;">
                    <div style="width: 100%; height: auto; background: #ffffff; padding: 8px 16px; margin-bottom: 16px;">
                        <p>{{project.companyName}}</p>
                    </div>
                    <div style="width: 100%; height: auto; float: left; background: #ffffff; padding: 8px 16px; margin-bottom: 16px;">
                        <p>{{ project.propertyName }}</p>
                        <div v-for="(item, index) in propertyList" :key="index" style="float: left; margin: 20px; width: 40%; border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.1); text-align: center;">
                            <p>{{ item.postName }}</p>
                            <p><span>{{ item.nickName }}</span><span>{{ item.phonenumber }}</span></p>
                        </div>
                    </div>
                    <div style="width: 100%; height: auto; float: left; background: #ffffff; padding: 8px 16px; margin-bottom: 16px;">
                        <p>北京国力达智能科技发展有限公司</p>
                        <div v-for="(item, index) in maintenanceList" :key="index" style="float: left; margin: 20px; width: 40%; border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.1); text-align: center;">
                            <p>{{ item.postName }}</p>
                            <p><span>{{ item.nickName }}</span><span>{{ item.phonenumber }}</span></p>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="16">
                <!-- <el-table v-loading="loading" :data="workorderInfoList" @selection-change="handleSelectionChange"> -->
                <el-table v-loading="loading" :data="workorderInfoList">
                    <!-- <el-table-column type="selection" width="55" align="center" /> -->
                    <el-table-column label="工单类型" align="center" prop="type" width="180">
                        <template #default="scope">
                            <span :style="{color: scope.row.type=='0'?'#67C23A':scope.row.type=='1'?'#F56C6C':scope.row.type=='2'?'#E6A23C': ''}">
                            {{ scope.row.type=='0'?'保养工单':scope.row.type=='1'?'维修工单':scope.row.type=='2'?'巡检工单':'' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="工单名称" align="center" prop="name" width="180" />
                    <el-table-column label="工单编号" align="center" prop="workorderId" width="180" />
                    <!-- <el-table-column label="报修时间" align="center" prop="createTime" width="180">
                        <template #default="scope">
                            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="工单状态" align="center" prop="status" width="180">
                        <template #default="scope">
                            <el-tag v-if="scope.row.status" :type="scope.row.status=='0'?'':scope.row.status=='1'?'':scope.row.status=='2'?'':scope.row.status=='3'?'success':''">
                            {{ scope.row.status=='0'?'待处理':scope.row.status=='1'?'待执行':scope.row.status=='2'?'执行中':scope.row.status=='3'?'待确认':scope.row.status=='4'?'已完成':'' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="工单标签" align="center" prop="tag" width="180">
                        <template #default="scope">
                            <el-tag v-if="scope.row.tag" type="warning">
                                {{ scope.row.tag=='11'?'已挂起':scope.row.tag=='12'?'已超时':'' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template #default="scope">
                            <!-- <el-tooltip v-if="scope.row.status=='0'" content="处理" placement="top">
                                <el-button link type="primary" icon="ChatLineSquare" @click="handleUpdate(scope.row, 'process')" v-hasPermi="['workorder:workorderInfo:edit']"></el-button>
                            </el-tooltip> -->
                            <!-- <el-tooltip v-if="['1','2'].includes(scope.row.status)" content="执行" placement="top">
                                <el-button link type="primary" icon="Check" @click="handleUpdate(scope.row, 'execute')" v-hasPermi="['workorder:workorderInfo:edit']"></el-button>
                            </el-tooltip> -->
                            <!-- <el-tooltip v-if="scope.row.status=='0' && scope.row.repairResult=='1' && scope.row.unFinishReason=='1'" content="确认来源" placement="top">
                                <el-button link type="primary" icon="Pointer" @click="confirmSource(scope.row)" v-hasPermi="['workorder:workorderInfo:edit']"></el-button>
                            </el-tooltip> -->
                            <!-- <el-tooltip v-if="['0','1'].includes(scope.row.status) && !scope.row.pid" content="内容补录" placement="top"> -->
                            <el-button link  v-if="['0','1'].includes(scope.row.status) && !scope.row.pid" type="primary" @click="handleUpdate(scope.row, 'supplement')" v-hasPermi="['workorder:workorderInfo:edit']">编辑</el-button>
                            <!-- </el-tooltip> -->
                            <!-- <el-tooltip content="删除" placement="top"> -->
                            <!-- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['workorder:workorderInfo:remove']" style="color: red;">删除</el-button> -->
                            <!-- </el-tooltip> -->
                            <!-- <el-tooltip content="详情" placement="top"> -->
                            <!-- <el-button link type="primary" icon="view" @click="handleDetail(scope.row)" v-hasPermi="['workorder:workorderInfo:query']">详情</el-button> -->
                            <!-- </el-tooltip> -->
                            <!-- <el-tooltip v-if="['3'].includes(scope.row.status)" v-hasPermi="['workorder:workorderInfo:workorderFinish']" content="确认" placement="top">
                                <el-button link type="primary" icon="CircleCheck" @click="handleConfirmation(scope.row)" v-hasPermi="['workorder:workorderInfo:query']" style="color: #b3e19d;"></el-button>
                            </el-tooltip> -->
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
            </el-col>
        </el-row>
        <!-- 添加或修改工单信息对话框 -->
        <el-dialog :title="dialog.title" v-model="dialog.visible" width="80%" append-to-body>
            <el-form ref="workorderInfoFormRef" :model="form" :rules="rules" label-width="80px">
                <el-row :gutter="24">
                    <el-col v-if="form.id" :span="24">
                        <el-steps :active="activeStep" finish-status="success" simple style="margin-bottom: 10px;">
                            <el-step v-for="item in workorderStatusList" :key="item.value" :title="item.label"></el-step>
                        </el-steps>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col v-if="form.id" :span="12">
                        <el-form-item label="工单编号" prop="workorderId">
                            <el-input v-model="form.workorderId" :disabled="true" placeholder="请输入工单编号" />
                        </el-form-item>
                    </el-col>
                    <el-col v-if="form.id" :span="12">
                        <el-form-item label="创建人" prop="createByName">
                            <el-input v-model="form.createByName" :disabled="true" placeholder="请输入工单名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="工单名称" prop="name">
                            <el-input v-model="form.name" placeholder="请输入工单名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="工单类型" prop="type">
                            <el-select v-model="form.type">
                                <el-option v-for="item in workorderTypeList" :key="item.id" :value="item.value" :label="item.label"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="执行区域" prop="execArea">
                            <el-input v-model="form.execArea" placeholder="请输入执行区域" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="系统类型" prop="deviceSystem">
                            <el-select v-model="form.deviceSystem" @change="deviceSystemHandle">
                                <el-option v-for="item in deviceSystemList" :key="item.id" :value="item.id" :label="item.systemName"  placeholder="请选择系统类型"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="form.type == '0'">
                        <el-form-item label="保养事项" prop="bysx">
                            <el-input v-model="form.bysx" placeholder="请输入保养事项" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="form.type == '1'">
                        <el-form-item label="设备类型" prop="deviceType">
                            <el-select v-model="form.deviceType" :disabled="!form.deviceSystem">
                                <el-option v-for="item in deviceTypeList" :key="item.id" :value="item.id" :label="item.typeName" placeholder="请选择设备类型"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="form.type == '2'">
                        <el-form-item label="巡检事项" prop="xjsx">
                            <el-input v-model="form.xjsx" placeholder="请输入巡检事项" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="任务级别" prop="taskLevel">
                            <el-select v-model="form.taskLevel">
                                <el-option v-for="item in workorderTaskLevelList" :key="item.id" :value="item.value" :label="item.label" placeholder="请选择任务级别"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="工单备注">
                        <el-input type="textarea" v-model="form.baseRemark" placeholder="请输入工单备注" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer" style="text-align: center;">
                <el-button @click="cancel">取 消</el-button>
                <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script  setup name="ProjectInfo" lang="ts">
import Cookies from 'js-cookie';
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
import { routerKey, useRouter } from 'vue-router';
import { listByIds } from '@/api/system/oss';
import { getProjectInfo } from '@/api/workorder/projectInfo';
import { listWorkorderInfo, getWorkorderInfo, updateWorkorderInfo, getStartExecute } from '@/api/workorder/workorderInfo';
import { getbaseInfoStatistics } from '@/api/workorder/projectInfo';

import { listDeviceType } from '@/api/workorder/deviceType';
import { listDeviceSystem } from '@/api/workorder/deviceSystem';
import realOrder from '../assets/images/iconImg/realOrderImg.png';
import timeExpired from '../assets/images/iconImg/timeExpiredImg.png';
import record from '../assets/images/iconImg/recordImg.png';
import starOrder from '../assets/images/iconImg/starOrderImg.png';
import projectStatistics from '../assets/images/iconImg/projectStatisticsImg.png';
import projectComplaints from '../assets/images/iconImg/projectComplaintsImg.png';
import addressBook from '../assets/images/iconImg/addressBookImg.png';
import { queryProjectUserListByProjectId } from '@/api/workorder/projectUser';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const dayWorkorderNum = ref(0);
const weekWorkorderNum = ref(0);
const monthWorkorderNum = ref(0);
const execingNum = ref(0);
const timeoutNum = ref(0);
const TIME_OPTIONS = [
    { label: '日', value: 'day' },
    { label: '周', value: 'week' },
    { label: '月', value: 'month' }
];

const CHART_DATA =  ref({
    day: [
        // { name: '维修工单', value: 313 },
        // { name: '保养工单', value: 250 },
        // { name: '巡检工单', value: 200 }
    ],
    week: [
        // { name: '维修工单', value: 900 },
        // { name: '保养工单', value: 750 },
        // { name: '巡检工单', value: 600 }
    ],
    month: [
        // { name: '维修工单', value: 2700 },
        // { name: '保养工单', value: 2200 },
        // { name: '巡检工单', value: 1800 }
    ]
});
const timeOptions = TIME_OPTIONS;
const itemImgs = [
    { text: '实时工单', image: realOrder },
    { text: '已超时', image: timeExpired },
    { text: '已挂起', image: realOrder }
];
const itemImg2s = [
    { text: '备件需求', image: record },
    // { text: '采购需求', image: record },
    // { text: '采购记录', image: record }
];
const itemImg3s = [
    { text: '标星工单', image: starOrder },
    // { text: '项目统计', image: projectStatistics },
    { text: '项目投诉', image: projectComplaints },
    { text: '通讯录', image: addressBook }
];
const propertyList =  ref([
  // { postName: '物业经理', nickName: '张三', phonenumber: '13389999988' },
  // { postName: '物业经理', nickName: '李四', phonenumber: '13389999988' },
  // { postName: '物业经理', nickName: '王五', phonenumber: '13389999988' }
]);
const maintenanceList =  ref([]);
const initFormData = {
    id: undefined,
    workorderId: undefined,
    createByName: undefined,
    name: undefined,
    type: undefined,
    execArea: undefined,
    deviceSystem: undefined,
    deviceType: undefined,
    taskLevel: undefined,
    baseRemark: undefined,
    status: undefined,
    tag: undefined,
    createTime: undefined,
    startTime: undefined,
    endTime: undefined,
    priorityLevel: undefined,
    userIdList: undefined,
    userNames: undefined,
    planRemark: undefined,
    locationSupport: undefined,
    problemDescription: undefined,
    reason: undefined,
    handMethod: undefined,
    fwtd: undefined,
    jsnl: undefined,
    xysd: undefined,
    fwpj: undefined,
    pjdj: undefined,
    starStatus: undefined,
    tagType: undefined,
    bynr: undefined,
    bysx: undefined,
    xjnr: undefined,
    xjsx: undefined,
};
const router = useRouter();
const projectId = Cookies.get('projectId');
const project = ref({});
const chart = ref(null);
const activeTime = ref('day'); // 默认选中“日”
const loading = ref(true);
const workorderInfoList = ref([]);
const queryParams = ref({ pageNum: 1, pageSize: 10 });
const total = ref(0);
const activeStep = ref(0);
const workorderStatusList = ref([
    { id: 0, label: '待处理', value: '0' },
    { id: 1, label: '待执行', value: '1' },
    { id: 2, label: '执行中', value: '2' },
    { id: 3, label: '待确认', value: '3' },
    { id: 4, label: '已完成', value: '4' }
]);
const workorderTypeList = ref([
    { id: 0, label: '保养工单', value: '0' },
    { id: 1, label: '维修工单', value: '1' },
    { id: 2, label: '巡检工单', value: '2' }
]);
const workorderTaskLevelList = ref([
    { id: 0, label: '重大', value: '0' },
    { id: 1, label: '紧急', value: '1' },
    { id: 2, label: '普通', value: '2' }
]);
const dialog = reactive({
    visible: false,
    addPartsBatchVisible: false,
    updateVisible: false,
    title: ''
});
const deviceSystemParams =  ref({
    pageNum: 1,
    pageSize: 999,
    description: undefined,
    systemId: undefined
});
const form = ref({ ...initFormData });
const workorderInfoFormRef = ref();
const buttonLoading = ref(false);
const workorderId = ref(null);
const deviceSystemList = ref([]);
const deviceTypeList = ref([]);
// 初始化图表
const initChart = () => {
const myChart = echarts.init(chart.value);
myChart.setOption({
tooltip: { trigger: 'item' },
// legend: { orient: 'vertical', left: 'left' },
series: [
    {
    name: '工单类型',
    type: 'pie',
    radius: '50%',
    data: CHART_DATA.value[activeTime.value],
    emphasis: {
        itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    }
    }
]
});
};
const handleTimeChange = (time) => {
    activeTime.value = time;
    initChart();
};
const fetchProjectDetail = async () => {
    try {
        const res = await getProjectInfo(projectId);
        if (res.code == '200' && res.data) {
            project.value = res.data;
            await handleData();
        }
    } catch (error) {
        console.error('获取项目详情失败:', error);
    }
};
const handleData = async () => {
    const res = await listByIds(project.value.picPath);
    project.value.url = res.data[0]?.url || '';
};
const getList = async () => {
    loading.value = true;
    queryParams.value.projectId = projectId;
    try {
        const res = await listWorkorderInfo(queryParams.value);
        workorderInfoList.value = res.rows;
        total.value = res.total;
    } finally {
        loading.value = false;
    }
};
const handlePage = () => {
    router.push('/projectInfoPage');
};
const checkFileSuffix = (fileSuffix) => {
const suffixArray = Array.isArray(fileSuffix) ? fileSuffix : [fileSuffix];
    return suffixArray.some(suffix => ['.png', '.jpg', '.jpeg'].includes(suffix.toLowerCase()));
};
const getDeviceTypeList = async () => {
    deviceSystemParams.value.systemId = form.value.deviceSystem;
    const res = await listDeviceType(deviceSystemParams.value);
    deviceTypeList.value = res.rows;
};
const getDeviceSystemList = async () => {
    const res = await listDeviceSystem(deviceSystemParams.value);
    deviceSystemList.value = res.rows;
};
const handleUpdate = async (row) => {
    reset();
    const _id = row?.id || ids.value[0];
    const res = await getWorkorderInfo(_id);
    Object.assign(form.value, res.data);
    activeStep.value = Number(form.value.status);
    workorderId.value = _id;
    await getDeviceTypeList();
    dialog.visible = true;
    form.value.tagType = 'edit';
    dialog.title = '修改工单信息';
};
const reset = () => {
    form.value = { ...initFormData };
    workorderInfoFormRef.value?.resetFields();
};
const cancel = () => {
    reset();
    dialog.visible = false;
};
const submitForm = () => {
    workorderInfoFormRef.value?.validate(async (valid) => {
        if (!valid) return;
        buttonLoading.value = true;
        form.value.projectId = projectId;
        try {
            await updateWorkorderInfo(form.value);
            proxy?.$modal.msgSuccess("操作成功");
            dialog.visible = false;
            await getList();
        } catch (error) {
            console.error(error);
        } finally {
            buttonLoading.value = false;
        }
    });
};
const baseInfoStatistics = async () => {
    try {
        CHART_DATA.value.day = [];
        dayWorkorderNum.value = 0;
        weekWorkorderNum.value = 0;
        monthWorkorderNum.value = 0;
        execingNum.value = 0;
        timeoutNum.value = 0;
            const dataRes = await getbaseInfoStatistics(projectId);
            if (dataRes.code === 200 && dataRes.data) {
            dayWorkorderNum.value = dataRes.data.dayWorkorderNum;
            weekWorkorderNum.value = dataRes.data.weekWorkorderNum;
            monthWorkorderNum.value = dataRes.data.monthWorkorderNum;
            execingNum.value = dataRes.data.execingNum;
            timeoutNum.value = dataRes.data.timeoutNum;


            CHART_DATA.value.day.push( { name: '维修工单', value: dataRes.data.day_wxgd });
            CHART_DATA.value.day.push( { name: '保养工单', value: dataRes.data.day_bygd });
            CHART_DATA.value.day.push( { name: '巡检工单', value: dataRes.data.day_xjgd });

            CHART_DATA.value.week.push( { name: '维修工单', value: dataRes.data.week_wxgd });
            CHART_DATA.value.week.push( { name: '保养工单', value: dataRes.data.week_bygd });
            CHART_DATA.value.week.push( { name: '巡检工单', value: dataRes.data.week_xjgd });

            CHART_DATA.value.month.push( { name: '维修工单', value: dataRes.data.month_wxgd });
            CHART_DATA.value.month.push( { name: '保养工单', value: dataRes.data.month_bygd });
            CHART_DATA.value.month.push( { name: '巡检工单', value: dataRes.data.month_xjgd });

            initChart();
        }
    } catch (error) {
        console.error('获取数据失败:', error);
    }
};
const queryProjectUserList  = async () => {
    try {
        // propertyList.value= [];
        // maintenanceList.value= [];
        const dataRes = await queryProjectUserListByProjectId(projectId);
        if (dataRes.code === 200 && dataRes.data) {
        dataRes.data.forEach((item) => {
            if(item.postCategory == '物业公司'){
                propertyList.value.push(item)
            }else if(item.postCategory == '维修公司'){
                maintenanceList.value.push(item)
            }
        })
        }
    } catch (error) {
        console.error('获取数据失败:', error);
    }
};

const handleImageClick = (type) => {
    const redirectUrl = '/workorderInfo';
    router.push({ path: redirectUrl, query: { type } }).then(() => {
        routerKey.value += 1;
    });
    // window.location.href = `${redirectUrl}?type=${type}`;
};
const handleImageClickForStatus = (item) => {
  const redirectUrl = '/workorderInfo';
  if(item.text == '实时工单'){
    router.push({ path: redirectUrl, query:  {status:'15'} }).then(() => {
      routerKey.value += 1;
    });
  }else if(item.text == '已超时'){
    router.push({ path: redirectUrl, query: { tag:'12' } }).then(() => {
      routerKey.value += 1;
    });
  }else if(item.text == '已挂起'){
    router.push({ path: redirectUrl, query: { tag:11 } }).then(() => {
      routerKey.value += 1;
    });
  }
};

const handleImageClickForBjxq = (item) => {
    router.push({ path: '/partsRequipment' }).then(() => {
      routerKey.value += 1;
    });
};

const handleImageClickForXmgl = (item) => {

  if(item.text == '标星工单'){
    router.push({ path: '/workorderInfo', query:  {starStatus:'1'} }).then(() => {
      routerKey.value += 1;
    });
  }else if(item.text == '项目投诉'){
    router.push({ path: 'feedbackInfo', query: { tag:'12' } }).then(() => {
      routerKey.value += 1;
    });
  }else if(item.text == '项目统计'){
    router.push({ path: redirectUrl }).then(() => {
      routerKey.value += 1;
    });
  }else if(item.text == '通讯录'){
    router.push({ path: 'contacts'}).then(() => {
      routerKey.value += 1;
    });
  }

};

onMounted(() => {
    fetchProjectDetail();
    getList();
    getDeviceSystemList();
    baseInfoStatistics();
    queryProjectUserList();
});
</script>

<style scoped lang="scss">
.app-container {
    // height: calc(100vh - 84px);
    margin-top: 20px;
    .main {
        // min-height: calc(100vh - 84px);
        .el-col {
            height: calc(50vh);
            div {
                height: 100%;
                border-radius: 5px;
            }
        }
    }
}
.imgClass {
    img {
        margin: 30px 5px;
    }
}
</style>
<style scoped>
.chart-container {
    padding: 20px;
}

.chart-box {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 20px;
}
</style>
